<template>
  <div>
    <!-- 子应用容器 注入另外一个项目 官网https://wujie-micro.github.io/doc/guide/-->
    <div style="border: 2px solid blue;">
      <wujie-vue
        name="vue3-editor"
        :url="editorUrl"
        :sync="true"
        :alive="true"
        :exec="true"
        :props="editorProps"
        ref="wujieRef"
      ></wujie-vue>
    </div>
  </div>
</template>
<script>
// 如果使用wujie-vue
import WujieVue from "wujie-vue2";
const { bus } = WujieVue;
export default {
  name: "ArticleTemplateIndex",
  props: {
    datas: Object,
  },
  data() {
    return {
      editorProps: {},
      editorUrl: "http://192.168.1.84:7101",
    };
  },
  mounted() {
    console.log("主应用挂载成功------------------------");
    // 确保wujieBus已正确挂载
    this.handleWujieMounted();
  },
  methods: {
    handleWujieMounted() {
      console.log("wujie子应用挂载成功");
      // 子应用挂载后再设置事件监听
      this.setupEventBus();
    },
    setupEventBus() {
      if (!this.$wujieBus.$on) {
        console.error("wujieBus未正确初始化");
        return;
      }
      // 监听子应用发送的内容变化事件
      this.$wujieBus.$on(
        "editor-content-change",
        this.handleContentChangeFromBus
      );
    },
    handleContentChangeFromBus(content) {
      console.log("通过EventBus接收内容变化----------------:", {
        htmlLength: content.html,
        textLength: content.text,
      });
    },
  },
};
</script>
<style scoped lang="scss">
h1 {
  color: #333;
}
</style>
